<template>
  <div class="cascader-power-input-box" :class="[treeIsShow ? 'is-focus' : '']">
    <div class="content-box">
      <div class="placeholder-box" v-show="isEmpty">{{ placeholder }}</div>
      <div class="choose-box">
        <template v-for="(item, index) in choosedArr">
          <div class="choose-item" v-if="rootProps.collapseTags && index === 0" :key="index">
            <slot name="chooseItem">
              <span class="choose-item-content overHideCon-1">{{ getItemLabel(item) }}</span>
            </slot>
            <i class="iconfont icon-close-circle" @click.stop="clearItem(item)"></i>
          </div>
        </template>
        <div class="choose-item" v-if="choosedArr.length > 1">+{{ choosedArr.length - 1 }}</div>
      </div>
    </div>
    <div class="right-box">
      <i v-show="!isEmpty" class="iconfont icon-close-circle" @click.stop="clearAll"></i>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, computed } from 'vue';
import { t } from '@src/locales';
export default defineComponent({
  name: 'CascaderPowerInputDom',
  props: {
    placeholder: {
      type: String,
      default: t('common.placeholder.select'),
    },
    treeIsShow: {
      type: Boolean,
      default: false,
    },
    choosedData: {
      type: Array,
      default: () => [],
    },
    rootOptions: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { emit }) {
    const choosedArr = computed(() => {
      return props.choosedData;
    });
    const rootProps = computed(() => props.rootOptions);
    const isEmpty = computed(() => !choosedArr.value.length);
    function getItemLabel(data) {
      const { labelArr, label } = data;
      if (!labelArr?.length) return label;
      return labelArr.join('/');
    }
    function clearItem(item) {
      emit('chooseItem', item);
    }
    function clearAll() {
      emit('clearAllItem');
    }
    return {
      choosedArr,
      isEmpty,
      getItemLabel,
      clearItem,
      clearAll,
      rootProps,
    };
  },
});
</script>
<style lang="scss" scoped>
@import './inputDom.scss';
</style>
